.page-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}
.page-wrapper .backl,
.page-wrapper .backr {
  width: 0;
  height: 100%;
  background-color: #d2767b;
  position: absolute;
  transition: 2s;
}
.page-wrapper .backr {
  right: 0;
  background-color: #5789d2;
}
.page {
  width: 550px;
  height: 600px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 999;
  top: 0;
}
.page > img {
  position: absolute;
}
.page .leaf {
  bottom: 65px;
  left: 226px;
  width: 76px;
  cursor: pointer;
}
.page .lefthand {
  bottom: 0;
  left: -100%;
  width: 279px;
}
.page .righthand {
  bottom: 0;
  right: -100%;
  margin-top: 15px;
  width: 291px;
}
.page-font {
  position: absolute;
  left: 50%;
  top: 50px;
  margin-left: -87px;
  opacity: 0;
  transition: 1.8s;
}
@keyframes handl {
  100% {
    left: 0;
  }
}
@keyframes handr {
  100% {
    right: 0;
  }
}
